<template>
	<view class="page pageBg">
		<v-header title="企业信息" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="companyListContainer">
				<!--搜索-->
				<view class="searchCont   ">
					<view class="cell f  fs">
						<label>企业名称:</label>
						<view class=" f fl borInput"><input :value="name" placeholder="请输入企业名称" class="disInput" /></view>
					</view>
					<view class="cell f  fs">
						<label>企业类别:</label>
						<view class=" f fl borInput">
							<picker @change="selectChange($event, 'status')" class=" fl " :value="statuIndex" :range="statuArray" range-key="value">
								<input :value="statuArray[statuIndex].value" disabled placeholder="请选择企业类别" class="disInput" />
							</picker>
							<text class="cuIcon-unfold"></text>
						</view>
					</view>
				</view>
				<!--列表-->
				<scroll-view v-if="list.length > 0" scroll-y @scrolltolower="getList(0)" class="lineh1">
					<view class="title">
						会员企业数量：
						<text>32家</text>
						
					</view>
					<view class="cell-header f fb">
						<view class="title1">序号</view>
						<view class="title2">企业名称</view>
						<view class="title3">操作</view>
					</view>
					<view class="cell-cont f fb" v-for="(item, index) in 20" :key="index">
						<view class="title1">1</view>
						<view class="title2 oneLine">北京YY科技有限公司</view>
						<view class="title3 f fc">查看</view>
					</view>
					<view style="padding-bottom: 20px;"><load-more :loadingType="loadingType"></load-more></view>
				</scroll-view>
				<view v-else class="f fc fn nodata">
					<view class="img"></view>
					<view class="text">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import loadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		loadMore
	},
	data() {
		return {
			loadingType: 0, // 0 还有数据可以加载  , 1 重新加载， 2 没有更多了
			h: this.$h,
			name: '',
			//合同状态
			statuIndex: -1,
			statuArray: [
				{
					code: 0,
					value: '在孵企业'
				},
				{
					code: 1,
					value: '重点企业'
				}
			],
			list: [1, 2, 3, 4]
		};
	},
	methods: {
		//去合同详情
		toMessageDetail() {
			uni.navigateTo({
				url: './contractDetail'
			});
		},
		//筛选条件
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'status') {
				//隐患状态
				if (index >= 0) {
					than.statuIndex = index;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.pageBg {
	background: #f0f0f0;
}
.companyListContainer {
	width: 100%;
	height: 100%;
	padding: 30rpx 0 0;
	box-sizing: border-box;
	.title {
		font-size: 32rpx;
		text{
			color: $color3;
		}
		margin-bottom: 30rpx;
	}
	.cell-header {
		width: 100%;
		height: 90rpx;
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
		font-weight: bold;
		.title1 {
			width: 80rpx;
			text-align: center;
		}
		.title3 {
			width: 120rpx;
			text-align: center;
		}
	}
	.cell-cont {
		width: 100%;
		margin: 0 auto;
		height: 90rpx;
		border-bottom: 1px solid #eee;
		.title1 {
			width: 80rpx;
			text-align: center;
			flex-shrink: 0;
		}
		.title3 {
			width: 120rpx;
			text-align: right;
			height: 60rpx;
			background: $color;
			border-radius: 10rpx;
			color: #fff;
			flex-shrink: 0;
		}
	}
}
.searchCont {
	width: 690rpx;
	margin: 0 auto 30rpx;
	background: #fff;
	border-radius: 10rpx;
	padding: 20rpx 10rpx 20rpx 30rpx;
	box-sizing: border-box;

	.borInput {
		margin-left: 20rpx;
		height: 60rpx;
		background: #f0f0f0;
		border-radius: 20px;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.disInput {
		width: 100%;
		height: 60rpx;
	}

	.cell {
		width: 100%;
		margin-bottom: 20rpx;

		label {
			font-size: 30rpx;
			font-family: FZLTXHK;
			font-weight: normal;
			color: #000000;
		}
		.search {
			font-weight: bold;
			margin-right: 32rpx;
		}
		.item1 {
			width: 120rpx;
			height: 60rpx;
			border: 1px solid #ffa01e;
			font-size: 26rpx;
			color: #ffa01e;
			border-radius: 10rpx;
			margin-right: 15rpx;
		}
		.item2 {
			width: 120rpx;
			height: 60rpx;
			border: 1px solid #ccc;
			font-size: 26rpx;
			color: #ccc;
			border-radius: 10rpx;
			margin-right: 15rpx;
		}
		.bolor {
			border: 1px solid #ccc !important;
		}
		.xolor {
			color: #ccc !important;
		}
		.item2Color {
			border: 1px solid #ffa01e !important;
			color: #ffa01e !important;
		}
		.picker {
			height: 60rpx;
			border: 1px solid #ffa01e;
			border-radius: 10rpx;
			padding: 0 10rpx;
			box-sizing: border-box;

			.cuIcon-calendar {
				color: #ffa01e;
			}
			.dateinput {
				font-size: 26rpx;
				color: #ffa01e;
			}
		}
	}
}

.lineh1 {
	width: 690rpx;
	height: calc(100% - 265rpx);
	// border: 1px solid #f00;
	box-sizing: border-box;
	margin: 0 auto;
	background: #fff;
	padding: 30rpx 30rpx 0;
	border-radius: 15rpx;
}
</style>
